<template>
    <van-sticky>
        <van-nav-bar title="详情页" left-text="返回" left-arrow @click-left="onClickLeft" />
    </van-sticky>

    <van-swipe :autoplay="3000" lazy-render>
  <van-swipe-item v-for="image in detailInfo.pics" :key="image">
    <img :src="image.pics_mid" width="100%"/>
  </van-swipe-item>
</van-swipe>


    <div v-html="detailInfo.goods_introduce"></div>

    <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" />
        <van-action-bar-icon icon="cart-o" text="购物车"  />
        <van-action-bar-icon icon="shop-o" text="店铺"  />
        <van-action-bar-button type="warning" @click="jiaru" text="加入购物车" />
        <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>

</template>

<script setup>
import axios from 'axios';
import { ref } from 'vue';

const onClickLeft = () => history.back();
import { useRoute,useRouter } from 'vue-router';
const route=new useRoute();
const router=new useRouter();
const detailInfo=ref([]);
axios.get("https://api-hmugo-web.itheima.net/api/public/v1/goods/detail",{
    params:{
        goods_id:route.query.goods_id
    }
}).then(res=>{
    detailInfo.value=res.data.message
})
const jiaru=(goods_id)=>{
    router.push({
        path:'/cart',
        query:{
            goods_id
        }
    })
}
</script>

<style lang="scss" scoped></style>